<template>
  <div id="Recognition_container" style="height: 98%">
    <el-card>
      <div class="searchDiv">
        <div class="searchDivLeft">
          申請者:
          <el-input v-model="Search.searchbean.applyUserName" placeholder=""></el-input>&nbsp; 時間:
          <el-date-picker v-model="value1" type="daterange" value-format="YYYY-MM-DD" format="YYYY-MM-DD" range-separator="至" start-placeholder="開始期日" end-placeholder="終了期日">
          </el-date-picker
          >&nbsp; 残業/休暇:
          <el-select v-model="Search.searchbean.oliFlag" placeholder="ぜんぶ" class="select1">
            <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
          >&nbsp; 承認状態:
          <el-select v-model="Search.searchbean.verifiedState" placeholder="ぜんぶ" class="select2">
            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option> </el-select
          >&nbsp;
          <el-button type="primary" v-preventReClick icon="el-icon-search" @click="SearchRecognition()">検索</el-button>
        </div>
        <div class="searchDivRight">
          <el-button type="warning" v-preventReClick @click="passRecognition()">承認済み</el-button>
          <el-button type="danger" v-preventReClick @click="passRecognition1()">承認拒否</el-button>
        </div>
      </div>
      <el-table :data="Searchlist" border style="width: 100%" :header-cell-style="{ background: '#f2f2f2', color: '#606266' }" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="applyUserName" label="申請者"> </el-table-column>
        <el-table-column prop="oliFlag" label="分類">
          <template #default="scope">
            <p v-if="scope.row.oliFlag == '1'">残業</p>
            <p v-if="scope.row.oliFlag == '2'">休暇</p>
          </template>
        </el-table-column>
        <el-table-column prop="lsName" label="タイプ"> </el-table-column>
        <el-table-column prop="beginTime" label="開始時間"> </el-table-column>
        <el-table-column prop="endTime" label="終了時間"> </el-table-column>
        <el-table-column prop="totalTimes" label="時間(h)"> </el-table-column>
        <el-table-column prop="verifiedState" label="承認状態">
          <template #default="scope">
            <p v-if="scope.row.verifiedState == '0'">承認待ち</p>
            <p v-if="scope.row.verifiedState == '1'">承認済み</p>
            <p v-if="scope.row.verifiedState == '2'">承認拒否</p>
          </template>
        </el-table-column>
        <el-table-column prop="verifiedUserName" label="承認者"> </el-table-column>
        <el-table-column prop="verifiedTime" label="承認時間"> </el-table-column>
      </el-table>
      <!-- <div class="divider_pagination"> -->
      <!-- <el-divider></el-divider> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Search.indexPage"
        :page-size="Search.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- </div> -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Search: {
        searchbean: {
          groupEnterpriseGuid: this.$store.getters.showentergroup,
          userGuid: this.$store.getters.showuserGuid,
          applyUserName: '',
          verifiedUserName: '',
          beginTime: '',
          endTime: '',
          oliFlag: '',
          verifiedState: '0',
          flg: '2',
          superflg: this.$store.getters.showuserInfo.flag,
          selectflg: this.$store.getters.showuserInfo.selectFlag,
          leaderFlg: this.$store.getters.showuserInfo.leaderFlag,
          managerFlg:'',
          departmentGuid:this.$store.getters.showuserInfo.departGuid
        },
        indexPage: 1,
        pageSize: 8
      },
      Searchlist: [],
      total: 0,
      multipleSelection: [],
      value1: '',
      options1: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '1',
          label: '残業'
        },
        {
          value: '2',
          label: '休暇'
        }
      ],
      options2: [
        {
          value: '',
          label: '全部'
        },
        {
          value: '0',
          label: '承認待ち'
        },
        {
          value: '1',
          label: '承認済み'
        },
        {
          value: '2',
          label: '承認拒否'
        }
      ],
      pass: {
        oliGuids: [],
        verifiedState: '',
        verifiedUser: this.$store.getters.showuserGuid,
      },
      flag:0
    }
  },
  created() {
    this.SearchRecognition()
    // this.$store.getters.showuserInfo
    // console.log(this.$store.getters.showuserInfo)
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val
      console.log(this.multipleSelection)
    },
    // 检索
    SearchRecognition() {
      console.log(this.Search)
      if (this.value1 != null) {
        this.Search.searchbean.beginTime = this.value1[0]
        this.Search.searchbean.endTime = this.value1[1]
      } else {
        this.Search.searchbean.beginTime = ''
        this.Search.searchbean.endTime = ''
      }
      this.axios
        .post('/overtimeleaveinfo/select/list', this.Search)
        .then((res) => {
          this.Searchlist = res.data.data.list
          this.total = res.data.data.total
          console.log(this.Searchlist)
        })
        .catch((error) => {
          console.log(error)
        })
    },
    handleSizeChange(newSize) {
      console.log(newSize)
      this.Search.pageSize = newSize
      this.SearchRecognition()
    },
    handleCurrentChange(newPage) {
      console.log(newPage)
      this.Search.indexPage = newPage
      this.SearchRecognition()
    },
    // 審査が通る
    passRecognition() {
      // this.pass.oliGuids=[]
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      this.multipleSelection.forEach((item) => {
        if(item.verifiedState==='0'){
         this.pass.oliGuids.push(item.oliGuid)
         this.flag++
        }
      })

      if(this.flag!==this.multipleSelection.length)
      {
        this.flag=0
        this.pass.oliGuids=[]
       return this.$message.error('承認のために未承認を選択してください！')
       }
      this.pass.verifiedState = '1'
      console.log(this.pass.oliGuids)
      this.$confirm('通過しますか？', {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(() => {
        this.axios
          .put('/overtimeleaveinfo/verified', this.pass)
          .then((res) => {
            if (res.data.success !== 1) return this.$message.error(res.data.msg)
            this.$message.success(this.$getMsg('I0002'))
            this.flag=0
            this.pass.oliGuids = []
            this.SearchRecognition()
          })
          .catch((error) => {
            console.log(error)
          })
      },
      (res)=>{
        this.flag=0
        this.pass.oliGuids=[]
        console.log(res)
      })
    },
    // 審査拒否
    passRecognition1() {
      this.pass.oliGuids=[]
      if (this.multipleSelection.length === 0) {
        return this.$message({
          showClose: true,
          message: this.$getMsg('W0002'),
          type: 'warning'
        })
      }
      this.multipleSelection.forEach((item) => {
        if(item.verifiedState==='0'){
         this.pass.oliGuids.push(item.oliGuid)
         this.flag++
        }
      })
      if(this.flag!==this.multipleSelection.length)
      {
        this.flag=0
        this.pass.oliGuids=[]
       return this.$message.error('承認のために未承認を選択してください！')
       }
       this.pass.verifiedState = '2'
      console.log(this.pass.oliGuids)
      this.$confirm('拒否しますか？', {
        cancelButtonText: 'キャンセル',
        confirmButtonText: '確認',
        type: 'warning'
      }).then(() => {
        this.axios
          .put('/overtimeleaveinfo/verified', this.pass)
          .then((res) => {
            if (res.data.success !== 1) return this.$message.error(res.data.msg)
            this.$message.success(this.$getMsg('I0002'))
            this.flag=0
            this.pass.oliGuids = []
            this.SearchRecognition()
          })
          .catch((error) => {
            console.log(error)
          })
      },
      (res)=>{
        this.flag=0
        this.pass.oliGuids=[]
        console.log(res)
      })
    }
  }
}
</script>

<style scoped>
:deep( .el-divider) {
  position: absolute;
  bottom: 75px;
  width: 87.8%;
}
:deep(.el-range-editor--medium.el-input__inner) {
  width: 310px;
}
:deep(.el-select--medium) {
  width: 135px;
}
:deep(.el-input--medium){
  width: 135px;
}

</style>
